[#assign menucode="publishProduct"]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta name="description" content="安装通（azt365.com）中国大型的b2b电子商务智慧化平台,整合了国内安装行业内采购商与供应商,打通上下游产业链,信息透明共享,通过云平台,大数据,为各大企业供应商提供产品信息、企业推广,为您提供全面的安装行业资讯金融服务以及线上支付.">
<meta name="keywords" content="安装通,azt365,江苏b2b电子商务,江苏建筑采供批发平台,江苏弱电批发,江苏消防报警系统,江苏智慧安装建筑安装,江苏安防监控系统,江苏通风设备安装,江苏通风工程安装,江苏通风工程施工,江苏消防工程材料批发,江苏消防工程材料">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>发布产品-选择分类</title>
<link href="/res/css/respective/company/aztCom.css" rel="stylesheet">
<link href="/res/css/mall/mall.css" rel="stylesheet"> 
<style type="text/css">
	.backfoot.pd0{
		padding-left: 200px;
	}

	.choosed {
        background-color: #e1f4fa;
	}
</style>
</head> 
<body>
	<div class="coverDiv"></div>
	 <div class="warp">
		[#include "/front/common/front_headAzt.html"]
		<div class="backcontent">
			[#include "/front/common/front_leftAzt.html"]  
			<div class="back-main">
				<div class="mainContent">
					<div class="mainContentWhite">
						<h1>发布商品
							[#--<a class="malView">预览</a>--]
						</h1>
						<hr> 
						<div class="malPro">
							 <dl style="width: 23%;">
							 	<dt>选择分类</dt> 
							 </dl>
							 <dl style="width: 15%;">
							 	<dd></dd> 
							 </dl>
							  <dl style="width: 29%;">
							 	<dt style="background-image: url(/res/images/respective/mall/liuCheng/liuCheng2_03.png);color: #666666;">完善商品信息</dt>
							 </dl>
							 <dl style="width: 17%;">
							 	<dd></dd> 
							 </dl>
							 <dl style="width: 14%;">
							 	<dt style="background-image: url(/res/images/respective/mall/liuCheng/liuCheng_07.png);color: #666666;">发布商品</dt>
							 </dl>
						</div>  
						[#--<div class="lableIterm sort">
							<label>您最近使用的类目：</label>
							<div class="ppSelect" style="width: 267px;">
			                    <select style="color: #b9b9b9;">
									<option value="">请选择</option> 
			                    </select>
			                </div> 
						</div>--]
						<div class="sortChose">
							<div>
								<div class="sortRate" style="float: left;" data-level="1">
									<h2>选择一级分类</h2>
								</div>
								<div class="sortRate" style="vertical-align: top;" data-level="2">
									<h2>选择二级分类</h2>
									<div class="plChose">
										<h4 style="padding-top: 120px;">先选择上一个类目</h4>
										<h4>我才会显示哦~</h4>
										<img style="margin-top: 20px;" alt="" src="/res/images/respective/mall/sortPic_03.png"/>
									</div>
								</div> 
								<div class="sortRate" style="vertical-align: top;float: right;" data-level="3">
									<h2>选择三级分类</h2>
									<div class="plChose">
										<h4 style="padding-top: 120px;">先选择上一个类目</h4>
										<h4>我才会显示哦~</h4>
										<img style="margin-top: 20px;" alt="" src="/res/images/respective/mall/sortPic_03.png"/>
									</div>
								</div> 
							</div>
						</div>
						<div class="lableIterm sort" id="result">
							<label>您当前选择的产品分类是：</label>
							<strong></strong>
						</div>
						[@rule_content code="publish_product"/]
						<div class="lableIterm" style="margin-top: 45px;text-align: center;"> 
							<button class="opJingYing disab" type="button" onclick="next()" id="nextBtn">下一步</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>   
	[#include "/front/common/front_footerAzt.html"]

	<script type="text/html" id="categoryTemplate">
        <ul>
            {{# for(var i = 0, len = d.length; i < len; i++) {  }}
			<li onclick="choose(this)" data-id="{{d[i].id}}"><em {{# if(i == 0) { }}style="border: none;"{{# } }} >{{ d[i].name }}</em></li>
			{{# } }}
        </ul>
	</script>

	<script type="text/html" id="notChooseTemplate">
        <div class="plChose">
			<h4 style="padding-top: 120px;">先选择上一个类目</h4>
			<h4>我才会显示哦~</h4>
			<img style="margin-top: 20px;" alt="" src="/res/images/respective/mall/sortPic_03.png"/>
		</div>
	</script>

    <script type="text/javascript" src="/res/third/layer/layer.js"></script>
    <script type="text/javascript" src="/res/third/laytpl/laytpl.js"></script>
    <script type="text/javascript">
		$(function() {
			[#if !companyExt??]
                layer.alert("您尚未开通店铺", {title : '提示',btn : ['去开通'], closeBtn : 0},
                        function() {
                            location.href = '/shop/setting';
                        }
                );
				return;
			[/#if]

			//载入一级分类
			layer.ready(function() {
				loadCategory(1);
			});
		});

		function loadCategory(level, pid) {
			pid = pid || 0;
            $.ajax({
                url : '/category/find',
                type : 'post',
                dataType : 'json',
                data : {pid : pid},
                beforeSend : function() {
                    layer.load(2, {shade: 0.1});
                },
                success : function(res) {
                    if(res && res.success) {
                        showContent(level, laytpl($('#categoryTemplate').html()).render(res.obj));
                        $('#result strong').html($('.choosed').map(function() { return $(this).find('em').text(); }).get().join('-'));
                    } else {
                        layer.msg('获取商品分类失败');
                    }
                },
                complete : function() {
                    layer.closeAll('loading');
                }
            });
		}
		
		function choose(obj) {
			$(obj).siblings('.choosed').removeClass('choosed');
			$(obj).addClass('choosed');
			var level = $(obj).parents('.sortRate[data-level]').data('level');
			if(level < 3) {
                loadCategory(level + 1, $(obj).data('id'));
				if(level == 1) {
					//移除第三分类的内容
					showContent(3, $('#notChooseTemplate').html());
				}
                $('#nextBtn').addClass('disab');
            } else {
				//选择完毕，显示结果
				$('#result strong').html($('.choosed').map(function() { return $(this).find('em').text(); }).get().join('-'));
				$('#nextBtn').removeClass('disab');
			}
        }

        function showContent(level, content) {
            var $h2 = $('.sortRate[data-level=' + level + ']').find('h2');
            $h2.next().remove();
            $h2.after(content);
		}

        function next() {
			var cateId = $('li.choosed:eq(2)').data('id');
			if(cateId) {
				location.href = '/product/publish?cateId=' + cateId;
			}
		}
    </script>
</body>
</html>
